/* eslint-disable space-before-function-paren */
// 自己重写代码
// 路由前置守卫---权限控制

// 导入路由实例
// import router, { asyncRoutes } from './router'
import router from './router'
// 导入路由实例
import store from './store'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 白名单--无需登录就可访问的路由路径
const whiteList = ['/login', '/404']

// 注册全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 开启加载进度条
  nProgress.start()
  // 从vuex中获取token
  const { token } = store.state.user
  //   判断
  if (token) {
    // 已登录
    // 如果要去的路由路径在白名单中，就没必要去直接跳转到首页（已经登陆就无需重复登陆）
    if (to.path === '/login') {
      next('/')
      nProgress.done()
    } else {
      // 获取用户信息的action在这里调用
      // 注意:
      // 1.项目核心在权限控制，就是不同员工登录进来看到的主页菜单不同
      // 2.如果员工登录成功了，已经跳转至主页在发请求，获取员工的角色权限已经太晚了
      // 3，这个获取员工的角色权限信息的时机是在跳转至主页之前，拿到当前员工的角色信息，知道你是谁了
      //    有哪些权限，然后在对应的开放左侧菜单，这些操作都做完了，在让员工跳转至主页，这价时候ta所
      //    看到的左侧菜单就是ta具备的权限

      // 4，只是现在还不知道如何开放对应的左侧菜单，这个点先留着,大概原理就是根据
      //    员工列表信息进行动态筛选动态路由i包即可实现

      // await关键字的目的是等待action函数执行完毕，才继续往后执行(异步变同步)

      // 第1种解决方式: 判断vuex中的userId有没有
      // 这里拿到了用户信息，用户信息里有个 userInfo,roles.menus 可以拿到当前员工的角色列表
      // 这个角色列表数组中的字符串表明了当前员工可以看到的左侧菜单，今后基于这个数组对动态路由表
      // 做筛选，然后在调至首页，这样首页展示的左侧菜单就是当前员工能看到的
      if (!store.state.user.userInfo.userId) {
        // await关键字的目的是等待action函数执行完毕，才继续往后执行 (异步变同步)
        await store.dispatch('user/getuserInfoAction')

        const { menus } = store.state.user.userInfo.roles
        // 基于当前用户信息中 roles.menus 数组来筛选动态路由表
        const showAsyncRoutes = await store.dispatch(
          'router/filterAsyncRouteAction',
          menus
        )
        console.log(showAsyncRoutes)
        // 筛选的条件: 判断当前路由第一个children的名字是否在menus数组中
        // 在的话，就留下(拥有的权限/菜单，开放); 否则就过滤掉了，舍去了(不开放)

        // 把筛选的结果在动态追加到路由表中
        router.addRoutes([
          ...showAsyncRoutes,
          { path: '*', redirect: '/404', hidden: true }
        ])
        // 刷新路由表
        return next({
          ...to, // 保留原有所有要去的的路由信息
          replace: true // 替换刚才那一次跳转的历史记录
        })
      }

      // 第2种解决方式: 拿到action函数的返回值
      // 注意: 所有的action函数返回值都是Promise实例，要接收action函数的返回值，需要配合await关键字
      // const userObj = await store.dispatch('user/getuserInfoAction')
      // 判断userobj中是否存在userId，如果没有再发请求
      // 否则就放行
      next()
    }
  } else {
    // 未登录
    // 进一步判断需要去的路径是否在白名单中
    // 若果在就放行

    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 否则跳转至登录并携带回跳地址
      next(`/login?redirectUrl=${to.path}`)
      nProgress.done()
    }
  }
})

// 注册全局后置守卫
router.afterEach((to, from) => {
  nProgress.done()
})

// 按钮的操作权控制:
// 1.移除或显示
// 2.禁用
// 3.显示，也不禁用，给出无权操作的提示
